$(function() {
	// 第一个图表
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('tree_photo1'));
	// 指定图表的配置项和数据
	var option = {
		title: {

		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				label: {
					backgroundColor: '#6a7985'
				}
			}
		},
		legend: {
			data: ['邮件营销','广告', '直接访问', '搜索引擎']
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		}],
		yAxis: [{
			type: 'value'
		}],
		series: [{
				name: '邮件营销',
				type: 'line',
				stack: '总量',
				areaStyle: {},
				data: [12, 13, 10, 13, 9, 23, 21]
			},
			{
				name: '广告',
				type: 'line',
				stack: '总量',
				areaStyle: {},
				data: [15, 23, 20, 15, 19, 33, 41]
			},
			{
				name: '直接访问',
				type: 'line',
				stack: '总量',
				areaStyle: {},
				data: [32, 33, 30, 33, 39, 33, 32]
			},
			{
				name: '搜索引擎',
				type: 'line',
				stack: '总量',
				label: {
					normal: {
						show: true,
						position: 'top'
					}
				},
				areaStyle: {},
				data: [82, 93, 90, 93, 129, 133, 132]
			}
		]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);

	//第二个图表
	var myChart1 = echarts.init(document.getElementById('tree_photo2'));
	// 指定图表的配置项和数据
	var option1 = {
		title: {},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {},
		toolbox: {
			show: true,
			feature: {
				mark: {show: true},
				saveAsImage: {show: true}
			}
		},
		series: [
			{
				name: '',
				type: 'pie',
				radius: [80, 160],
				center: ['50%', '50%'],
				roseType: 'radius',
				label: {
					show: false
				},
				emphasis: {
					label: {
						// show: true
					}
				},
				data: [
					{value: 10, name: 'January'},
					{value: 5, name: 'February'},
					{value: 15, name: 'March'},
					{value: 16, name: 'April'},
					{value: 22, name: 'May'},
					{value: 28, name: 'June'},
					{value: 33, name: 'July'}

				]
			},
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart1.setOption(option1);


	//第三个图表
	var myChart2 = echarts.init(document.getElementById("tree_photo3"));
	var option2 = {
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},legend: {},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'value'
		},
		yAxis: {
			type: 'category',
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
		},
		series: [{
				name: '后宫那些事',
				type: 'bar',
				stack: '总量',
				label: {
					show: true,
					position: 'insideRight'
				},
				data: [12, 8, 20, 23, 19, 6, 22]
			},
			{
				name: '开心消消乐',
				type: 'bar',
				stack: '总量',
				label: {
					show: true,
					position: 'insideRight'
				},
				data: [12, 13, 10, 13, 9, 23, 20]
			},
			{
				name: '原神',
				type: 'bar',
				stack: '总量',
				label: {
					show: true,
					position: 'insideRight'
				},
				data: [20, 12, 11, 23, 29, 30, 10]
			},
			{
				name: '植物大战僵尸',
				type: 'bar',
				stack: '总量',
				label: {
					show: true,
					position: 'insideRight'
				},
				data: [15, 22, 3, 54, 10, 30, 10]
			},
			{
				name: '消灭星星',
				type: 'bar',
				stack: '总量',
				label: {
					show: true,
					position: 'insideRight'
				},
				data: [20, 32, 19, 4, 12, 30, 20]
			}]
	};
	myChart2.setOption(option2);

	//第四个图表
	var myChart3 = echarts.init(document.getElementById("tree_photo4"));
	var option3 = {
		title: {
		},
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c}%"
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		legend: {
			data: ['展现', '点击', '访问', '咨询', '订单']
		},
		series: [{
				name: '预期',
				type: 'funnel',
				left: '10%',
				width: '80%',
				label: {
					formatter: '{b}预期'
				},
				labelLine: {
					show: false
				},
				itemStyle: {
					opacity: 0.7
				},
				emphasis: {
					label: {
						position: 'inside',
						formatter: '{b}预期: {c}%'
					}
				},
				data: [{
						value: 60,
						name: '访问'
					},
					{
						value: 40,
						name: '咨询'
					},
					{
						value: 20,
						name: '订单'
					},
					{
						value: 80,
						name: '点击'
					},
					{
						value: 100,
						name: '展现'
					}
				]
			},
			{
				name: '实际',
				type: 'funnel',
				left: '10%',
				width: '80%',
				maxSize: '80%',
				label: {
					position: 'inside',
					formatter: '{c}%',
					color: '#fff'
				},
				itemStyle: {
					opacity: 0.5,
					borderColor: '#fff',
					borderWidth: 2
				},
				emphasis: {
					label: {
						position: 'inside',
						formatter: '{b}实际: {c}%'
					}
				},
				data: [{
						value: 30,
						name: '访问'
					},
					{
						value: 10,
						name: '咨询'
					},
					{
						value: 5,
						name: '订单'
					},
					{
						value: 50,
						name: '点击'
					},
					{
						value: 80,
						name: '展现'
					}]
			}]
	};

	myChart3.setOption(option3);
})
